<template>
  <div id="item-cell">
    <div class="wrap" v-for="(item, index) in data" :key="item.No" v-show="item.status=='1'">
      <div class="wrap-item text-center" :class="{active:value === item.No}" @click="itemClick(index, item)">
        <div class="selected-img">
          <img src='./assets/img/selected.png' />
        </div>
        <img v-if="onOff" class="icon-img" src="./assets/img/telphone.png" alt="telphone" />
        <span>{{item[labelField]}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'itemcell',
    data() {
      return {
        value: null,
      }
    },
    props: {
      data: {
        type: Array,
        required: true
      },
      labelField: {
        type: String,
        default: function () {
          return "label";
        }
      },
      imgField: {
        type: String,
        default: function () {
          return "label";
        }
      },
      valueField: {
        type: [Number, String],
        default: function () {
          return "value"
        }
      },
      activeIndex: {
        type: [Number, String],
        default: function () {
          return 0
        }
      },
      onOff: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    watch: {
      "activeIndex": {
        deep: true,
        handler(newval) {
          if (this.activeIndex !== 'null' || this.activeIndex !== null) {
            this.value = parseInt(this.activeIndex);
          }
        }
      }
    },
    methods: {
      itemClick(index, item) {
        this.value = item[index];
        this.$emit("change", item);
      }
    },
    mounted: function () {
      if (this.activeIndex !== 'null' || this.activeIndex !== null) {
        this.value = parseInt(this.activeIndex);
      }
    }
  }

</script>

<style scoped="scoped">
  #item-cell {
    margin-left: -40px;
  }

  .wrap {
    width: 20%;
    /*height: 50px;*/
    line-height: 50px;
    display: inline-block;
    margin-top: 35px;
  }

  .wrap-item {
    border: 1px solid #e3e3e3;
    background-color: #f7f7f7;
    width: calc(100% - 40px);
    float: right;
    position: relative;
  }

  .wrap-item.active {
    border: 1px solid #2392d1;
    background-color: #fff;
  }

  .wrap-item.active .selected-img {
    display: block;
  }

  .selected-img,
  .selected-img img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .selected-img {
    display: none;
  }

  .icon-img {
    vertical-align: middle;
    margin-right: 15px;
  }

</style>
